﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dom操作--删除</title>
    <link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css">
    <style>
       table,td{border:1px solid #ddd;}
       table{border-collapse:collapse;width:100%;}
       td{padding:10px;}
    </style>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <script>
    $(function() {
        // $('td:has(button)').css('text-align','right');
        var $delTd = $('td').has('button').css('text-align','right');

        // remove删除页面上的元素
        // empty清空所有子元素
        
        $delTd.find('button').click(function(){
            var $self = $(this)
            $( "#dialog-confirm" ).dialog({
              resizable: false,
              height:180,
              modal: true,
              buttons: {
                "确认删除": function() {
                  $self.closest('tr').empty();
                  $( this ).dialog( "close" );
                },
                "取消": function() {
                  $( this ).dialog( "close" );
                }
              }
            });
             
        });
    });
    </script>
</head>

<body>
<div id="dialog-confirm" title="确认删除" style="display:none;">
  <p>你确定要删除这条数据么</p>
</div>
    <table><tr><td>
        <table id="data-list">
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
        </table>
    </td>
    </tr>
    </table>
</body>

</html>
